<script>
$(document).ready(function(){
$('#email span').hide();
$('#pwdold span').hide();
$('#pwd span').hide();
$('#pwd2 span').hide();
$('#name span').hide();


$('#email input').on("click keyup", function(){
	$('#email span').hide();
	var inputVal = $(this).val();
	var emailRegex = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	if(!emailRegex.test(inputVal)){
		$('#email span').show();
		$('#email span').removeClass(" glyphicon-ok");
		$('#email').removeClass(" has-success");
		$('#email span').addClass(" glyphicon-remove top");
		$('#email').addClass(" has-error");
		$('#updateUserbtn').slideUp("fast");
	}else{
		$('#email span').removeClass(" glyphicon-remove");
		$('#email').removeClass(" has-error");
		$('#email span').addClass(" glyphicon-ok");
		$('#email').addClass(" has-success");
		$('#email span').show();
		$('#updateUserbtn').slideDown("fast, done");
	}
});


$('#oldpwd input').on("click keyup", function(){
	$('#oldpwd span').hide();
	var inputVal = $(this).val();
	var pwdRegex = new RegExp(/^[ÆØÅæøåa-zA-Z0-9]{8,20}$/);
	if(!pwdRegex.test(inputVal)){
		$('#oldpwd span').show();
		$('#oldpwd span').removeClass(" glyphicon-ok");
		$('#oldpwd').removeClass(" has-success");
		$('#oldpwd span').addClass(" glyphicon-remove");
		$('#oldpwd').addClass(" has-error");
	}else{
		$('#oldpwd span').removeClass(" glyphicon-remove");
		$('#oldpwd').removeClass(" has-error");
		$('#oldpwd').addClass(" has-success");
		$('#oldpwd span').show();
	}
});

$('#pwd input').on("click keyup", function(){
	$('#pwd span').hide();
	var inputVal = $(this).val();
	var pwdRegex = new RegExp(/^[ÆØÅæøåa-zA-Z0-9]{8,20}$/);
	if(!pwdRegex.test(inputVal)){
		$('#pwd span').show();
		$('#pwd span').removeClass(" glyphicon-ok");
		$('#pwd').removeClass(" has-success");
		$('#pwd span').addClass(" glyphicon-remove");
		$('#pwd').addClass(" has-error");
		$('#updateUserbtn').slideUp("fast");
	}else{
		$('#pwd span').removeClass(" glyphicon-remove");
		$('#pwd').removeClass(" has-error");
		$('#pwd span').addClass(" glyphicon-ok");
		$('#pwd').addClass(" has-success");
		$('#pwd span').show();
		$('#updateUserbtn').slideDown("fast, done");
	}
});

$('#pwd2 input').on("click keyup", function(){
	$('#pwd2 span').hide();
	var inputVal = $(this).val();
	var pwdRegex = new RegExp(/^[ÆØÅæøåa-zA-Z0-9]{8,20}$/);
	if(!pwdRegex.test(inputVal)){
		$('#pwd2 span').show();
		$('#pwd2 span').removeClass(" glyphicon-ok");
		$('#pwd2').removeClass(" has-success");
		$('#pwd2 span').addClass(" glyphicon-remove");
		$('#pwd2').addClass(" has-error");
		$('#updateUserbtn').slideUp("fast");
	}else{
		$('#pwd2 span').removeClass(" glyphicon-remove");
		$('#pwd2').removeClass(" has-error");
		$('#pwd2 span').addClass(" glyphicon-ok");
		$('#pwd2').addClass(" has-success");
		$('#pwd2 span').show();
		$('#updateUserbtn').slideDown("fast, done");
	}
});

$('#name input').on("click keyup", function(){
	$('#name span').hide();
	var inputVal = $(this).val();
	var nameRegex = new RegExp(/^[ÆØÅæøåa-åA-Å -]+/);
	if(!nameRegex.test(inputVal)){
		$('#name span').show();
		$('#name span').removeClass(" glyphicon-ok");
		$('#name').removeClass(" has-success");
		$('#name span').addClass(" glyphicon-remove");
		$('#name').addClass(" has-error");
		$('#updateUserbtn').slideUp("fast");
	}else{
		$('#name span').removeClass(" glyphicon-remove");
		$('#name').removeClass(" has-error");
		$('#name span').addClass(" glyphicon-ok");
		$('#name').addClass(" has-success");
		$('#name span').show();
		$('#updateUserbtn').slideDown("fast, done");
	}
});

$(".top").tooltip({
    placement: "top"
});

});
</script>
<div class="modal-header">
	  		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	 		<h4 class="modal-title" id="myModalLabel">Endre bruker</h4><p>Hold musepeker på ikoner for hjelp</p>
		</div>
		<div class="modal-body">
	    	<form onsubmit="return false;">
	    		<div id="userName" class="form-group has-feedback">
	    			<input type="text" class="form-control" id="userName" name="userName" disabled />
	    			<span id="userName" class="top"  style="top: 0;"  
	    			data-original-title="Brukernavn må bestå av bokstaver(a til Z) eller tall, og være mellom 2 til 20 tegn"></span>
				</div>
				<label for="email">Epost:</label>
				<div id="email" class="form-group has-feedback">
					<input type="email" class="form-control"  id="email" name="email" placeholder="Epost adresse"  />
					<span id="email" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;" 
					data-original-title="Epost må være et gyldig format(abc@domene.no)"></span>
				</div>
				<label for="oldpwd">Passord:</label>
				<div id="oldpwd" class="form-group has-feedback">					
					<input type="password" class="form-control" name="oldpwd"  id="oldpwd" placeholder="Gjelende passord"/>
					<span id="oldpwd" class="top glyphicon form-control-feedback " style="top: 0;" 
					data-original-title="Passord må stemme med det som er ditt gjeldende passord"></span>
				</div>
				<div id="pwd" class="form-group has-feedback">					
					<input type="password" class="form-control" name="pwd"  id="pwd" placeholder="Nytt passord"/>
					<span id="pwd" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;" 
					data-original-title="Passord må ha følgende kriterier: Tall og minst en liten bokstav og minst en stor bokstav og være mellom 8 og 20 tegn langt"></span>
				</div>			
				<div id="pwd2" class="form-group has-feedback">
					<input type="password" class="form-control" name="pwd2" id="pwd2" placeholder="Gjenta nytt passord"/>
					<span id="pwd2" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;" 
					data-original-title="Har de samme kriteriene som feltet ovenfor, og må være likt feltet over"></span>
				</div>
				<label for="name">Ditt navn:</label>
				<div id="name" class="form-group has-feedback">					
					<input type="text"  class="form-control" name="name" id="name" placeholder="Fornavn"/>
					<span id="name" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;"
					data-original-title="Kan kun bestå av bokstaver og bindestreker"></span>
				</div>
				<label for="town">Hjemsted:</label>
				<input type="text"  class="form-control has-feedback" name="homeTown" id="homeTown" placeholder="Hjemsted(valgfritt)"/>
		
				<div id="alertChangeUser_placeholder" class="fade"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Avbryt</button>
				    <button type="button" class="btn btn-primary" id="updateUserbtn" onclick="javascript:changeUserFormCheck(this.form);">Lagre</button>
				</div>
				</form>
			</div>